<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后台登录</title>
<link rel="stylesheet" href="__WEBPUBLIC__/Admin/css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="__WEBPUBLIC__/Admin/css/toocms.css" type="text/css" media="screen" />
<script type="text/javascript" src="__WEBPUBLIC__/Common/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="__WEBPUBLIC__/Admin/js/ajax-operate.js"></script>
<script type="text/javascript" src="__WEBPUBLIC__/Admin/js/bootstrap.min.js"></script>
</head>
<body>
<style media="screen" type="text/css">
body{background:url(__WEBPUBLIC__/Admin/images/admin_bg.jpg) no-repeat top center;}
.login-wrapper{position:absolute;top:90px;left:0;right:0;text-align:center;}
.login-wrapper .logo{position:relative;left:-2px;}
.login-wrapper .box{box-shadow:0 0 6px 2px rgba(0,0,0,0.1);border-radius:5px;background:#fff; padding-bottom: 20px}
.login-wrapper .box h6{text-transform:uppercase;color:#3f77a4;padding-top:30px;font-size:18px;font-weight:600;margin:0 0 30px;}
.login-wrapper .box input[type="text"],.login-wrapper .box input[type="password"]{font-size:15px;border-color:#b2bfc7;}
.login-wrapper .box input:-moz-placeholder{color:#9ba8b6;font-size:15px;letter-spacing:0;font-style:italic;}
.login-wrapper .box a.forgot{display:block;text-align:right;font-style:italic;text-decoration:underline;color:#3d88ba;font-size:13px;margin-bottom:6px;}
.login-wrapper .box .remember{display:block;overflow:hidden;margin-bottom:20px;}
.login-wrapper .box .remember input[type="checkbox"]{float:left;margin-right:8px;}
.login-wrapper .box .remember label{float:left;color:#4a576a;font-size:13px;font-weight:600;}
.login-wrapper .box .login{text-transform:uppercase;font-size:13px;padding:8px 30px;}
.login-wrapper .no-account{float:none;text-align:center;font-size:14px;margin:25px auto 0;}
.login-wrapper .no-account p{display:inline-block;color:#fff;}
.login-wrapper .no-account a{color:#fff;margin-left:7px;border-bottom:1px solid;transition:all .1s linear;-moz-transition:all .1s linear;-webkit-transition:all .1s linear;-o-transition:all .1s linear;}
.login-wrapper .no-account a:hover{text-decoration:none;color:#fff;border-bottom-color:#fff;}
.login-wrapper .input-group-addon{background-color:transparent;color:#a2afb7;border-color:#b2bfc7;}
.logo-page{margin-bottom:20px;}
.logo{color:#fff;font-size:33px;font-weight:100;}
.login-wrapper .box input:-ms-input-placeholder,.login-wrapper .box input::-webkit-input-placeholder{color:#9ba8b6;font-style:italic;letter-spacing:0;font-size:15px;}
.displaynone{display:none!important;}
.text-alert{margin-top:15px;padding:5px;}
.login-wrapper .login-btn{padding-top: 15px;}
.login-wrapper {position: relative;}
.notification{position: absolute; bottom: 84px; left: 0; text-align: center; width: 100%; color: red}
</style>
<body>
<div class="login-wrapper">

    <div class="col-md-4 col-md-offset-4 logo-page"> 
        <a href="" title="toocms"><span class="logo">
        众享通赢商家小程序管理后台
        </a>
    </div>

    <div class="container">
        <div class="row">
        <div class="col-md-4 col-md-offset-4 box">          
            <div class="content-wrap">
                <h6>后台登陆</h6>
                <p class="text-danger bg-danger text-alert  displaynone" id="login-error">账户或密码错误，请重新登录！</p>
                <form method="post" action="{:U('Index/index')}" class="form">
                <div class="form-group col-lg-12" id="account-form" >
                    <div class="input-group input-group-lg col-lg-12">
                        <span class="input-group-addon"><span aria-hidden="true" class="icon glyphicon glyphicon-user"></span></span>
                        <input class="form-control" name="account" id="account" type="text" placeholder="账号" onblur="check_account()">
                    </div>
                </div>             
                <div class="form-group col-lg-12">
                    <div class="input-group input-group-lg col-lg-12">
                        <span class="input-group-addon"><span aria-hidden="true" class="icon glyphicon glyphicon-lock"></span></span>
                        <input class="form-control" name="password" type="password" placeholder="密码">
                    </div>
                </div>   
                <div class="form-group col-lg-12 hidden" id="verifyDiv">
                    <div class="input-group input-group-lg col-lg-6" style="float:left; margin-right:10px;">
                        <span class="input-group-addon"><span aria-hidden="true" class="icon glyphicon glyphicon-random"></span></span>
                        <input class="form-control text-input" name="verify" type="password" placeholder="验证码">
                    </div>
                    <div class="fl">
                        <img src="{:U('Manager/verify')}" onclick="change_verify();" id="verify_img" width="145" height="45">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 login-btn">
                    <input type="hidden" name="errorNum" id="errorNum" value="0" />
                    <p><input type="button" class="btn btn-primary btn-lg btn-block submit-btn" value="立刻登录"></p>
                </div>
                </div>
                <div class="notification"></div>
                </form>
            </div>
        </div>
        </div>
    </div>

</div>
<script>
function change_verify(){
    var str = "{:U('Manager/verify')}";
    document.getElementById('verify_img').src=str+'/'+new Date().getTime();
}

function check_account(){
    var account = $('#account').val();
    var url = "{:U('Manager/checkAccount')}";
    if(account==""){
        $('.notification').html('请输入用户名');
    }else{
        $.ajax({
            url : url,
            type:'POST',
            data: {account:account},
            dataType:'JSON',
            success:function(data){
                if(data.error !=null){
                    $('.notification').html(data.error);
                }else{
                    document.getElementById("errorNum").value=data.success;
                    if(data.success>=3){
                        $('#verifyDiv').removeClass('hidden');
                    }
                }
            }
        });
    }       
}

$(function(){
    $('#account').focus();
    var dologin = "{:U('Manager/doLogin')}";
    var verify = "{:U('Manager/verify')}";
    $('.submit-btn').click(function(){
        if(document.getElementById("errorNum").value>=3){
            if($("input[name='verify']").val()==""){
                $('.notification').html('请输入验证码');
                $('#verifyDiv').removeClass('hidden');
            }else{
                ajaxLogin(dologin,verify);
            }
        }else{
            ajaxLogin(dologin,verify);
        }
        
    });
});
</script>
</body>
</html>
